<template>
	<scroll-view class="container bg-white" scroll-y style="height: 95vh;">
		<view id="diypage" @click="onSelectElement">
			<view v-for="(item, index) in pageValue.lists" :key="index">
				<!-- 页面标题 -->
				<group :index="index" v-if="item.controller == 'header'">
						<cu-header :bgColor="item.attribute.bgcolor" :isBack="item.attribute.back">
							<block slot="content" class="page-name">{{ item.attribute.text }}</block>
						</cu-header>
				</group>
				<!-- 搜索 -->
				<group :index="index" v-if="item.controller == 'search'">
					<cu-search :id="index"></cu-search>
				</group>
				<!-- 切换卡 -->
				<group :index="index" v-if="item.controller == 'tabbar'">
					<cu-tabbar :datas="item.data" :id="index"></cu-tabbar>
				</group>
				<view>
					<!-- 标题栏 -->
					<group :index="index" v-if="item.controller == 'title'">
						<cu-title :title="item.attribute.text" hint="Modal" modal="3" :id="index"></cu-title>
					</group>
					<!-- 条目 -->
					<group :index="index" v-if="item.controller == 'cell'">
						<cu-cell :id="index"></cu-cell>
					</group>
					<group :index="index" v-if="item.controller == 'badge'">
						<cu-badge ltext="喜欢" rtext="20" bgcolor="orange" :id="index"></cu-badge>
					</group>
					<!-- 胶囊 -->
					<group :index="index" v-if="item.controller == 'capsule'">
						<cu-capsule :id="index"></cu-capsule>
					</group>
					<!-- 条幅 -->
					<group :index="index" v-if="item.controller == 'banner'">
						<cu-banner :id="index"></cu-banner>
					</group>
					<!-- 轮播图 -->
					<group :index="index" v-if="item.controller == 'swiper'">
						<cu-swiper :id="index"></cu-swiper>
					</group>
					<!-- 卡片 -->
					<group :index="index" v-if="item.controller == 'card'">
						<cu-card :id="index"></cu-card>
					</group>
					<!-- 网格 -->
					<group :index="index" v-if="item.controller == 'grid'">
						<cu-grid :datas="item.data" :id="index"></cu-grid>
					</group>
					<!-- 富媒体网格 -->
					<group :index="index" v-if="item.controller == 'grid-media'">
						<cu-grid-media :datas="item.data" :id="index"></cu-grid-media>
					</group>
					<!-- 列表 -->
					<group :index="index" v-if="item.controller == 'list'">
						<cu-list :datas="item.data" :id="index"></cu-list>
					</group>
					<!--条目列表 -->
					<group :index="index" v-if="item.controller == 'list-cell'">
						<cu-list-cell :datas="item.data" :id="index"></cu-list-cell>
					</group>
					<!-- 富媒体列表 -->
					<group :index="index" v-if="item.controller == 'list-media'">
						<cu-list-media :datas="item.data" :id="index"></cu-list-media>
					</group>
					<!-- 步骤条 -->
					<group :index="index" v-if="item.controller == 'steps'">
						<cu-steps :datas="item.data" :id="index"></cu-steps>
					</group>
					<!-- 时间线 -->
					<group :index="index" v-if="item.controller == 'timeline'">
						<cu-timeline :datas="item.data" :id="index"></cu-timeline>
					</group>
					<!-- 输入框 -->
					<group :index="index" v-if="item.controller == 'input'">
						<cu-input :id="index"></cu-input>
					</group>
					<!-- 数字输入框 -->
					<group :index="index" v-if="item.controller == 'input-number'">
						<cu-input-number :id="index"></cu-input-number>
					</group>
					<!-- 单选 -->
					<group :index="index" v-if="item.controller == 'radio'">
						<cu-radio :datas="item.data" :id="index"></cu-radio>
					</group>
					<!-- 多选框 -->
					<group :index="index" v-if="item.controller == 'checkbox'">
						<cu-checkbox :datas="item.data" :id="index"></cu-checkbox>
					</group>
					<!-- 切换开关 -->
					<group :index="index" v-if="item.controller == 'switch'">
						<cu-switch :id="index"></cu-switch>
					</group>
					<!-- 多行输入 -->
					<group :index="index" v-if="item.controller == 'textarea'">
						<cu-textarea :id="index"></cu-textarea>
					</group>
				</view>

				<!-- 异常页 -->
				<group :index="index" v-if="item.controller == 'nosearch'">
					<cu-nosearch :id="index"></cu-nosearch>
				</group>
				<!-- 普通导航 -->
				<group :index="index" v-if="item.controller == 'navbar'">
					<cu-navbar :id="index"></cu-navbar>
				</group>
				<!-- 按钮导航 -->
				<group :index="index" v-if="item.controller == 'navbar-btns'">
					<cu-navbar-btns :id="index"></cu-navbar-btns>
				</group>
				<!-- 多元导航 -->
				<group :index="index" v-if="item.controller == 'navbar-multi'">
					<cu-navbar-multi :id="index"></cu-navbar-multi>
				</group>
			</view>
		</view>
	</scroll-view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { onHome } from '@/utils/api.js';
//header
import cuHeader from '@/components/diy/header/cu-header.vue';
import cuSearch from '@/components/diy/header/cu-search.vue';
import cuTabbar from '@/components/diy/header/cu-tabbar.vue';

//content
import cuTitle from '@/components/diy/content/cu-title.vue';
import cuCell from '@/components/diy/content/cu-cell.vue';
import cuBadge from '@/components/diy/content/cu-badge.vue';
import cuCapsule from '@/components/diy/content/cu-capsule.vue';
import cuBanner from '@/components/diy/content/cu-banner.vue';
import cuCard from '@/components/diy/content/cu-card.vue';
import cuSwiper from '@/components/diy/content/cu-swiper.vue';
import cuNoSearch from '@/components/diy/content/cu-nosearch.vue';
//list
import cuGrid from '@/components/diy/list/cu-grid.vue';
import cuGridMedia from '@/components/diy/list/cu-grid-media.vue';
import cuList from '@/components/diy/list/cu-list.vue';
import cuListCell from '@/components/diy/list/cu-list-cell.vue';
import cuListMedia from '@/components/diy/list/cu-list-media.vue';
import cuSteps from '@/components/diy/list/cu-steps.vue';
import cuTimeline from '@/components/diy/list/cu-timeline.vue';
//from
import cuInput from '@/components/diy/from/cu-input.vue';
import cuInputNumber from '@/components/diy/from/cu-input-number.vue';
import cuRadio from '@/components/diy/from/cu-radio.vue';
import cuCheckbox from '@/components/diy/from/cu-checkbox.vue';
import cuSwitch from '@/components/diy/from/cu-switch.vue';
import cuTextarea from '@/components/diy/from/cu-textarea.vue';
//footer
import cuNavbar from '@/components/diy/footer/cu-navbar.vue';
import cuNavbarBtns from '@/components/diy/footer/cu-navbar-btns.vue';
import cuNavbarMulti from '@/components/diy/footer/cu-navbar-multi.vue';

import group from '@/components/diy/group.vue';
export default {
	computed: {
		...mapState({
			pageValue: state => state.diy.pageValue
		})
	},
	components: {
		group,
		cuHeader,
		cuSearch,
		cuTabbar,
		cuNavbar,
		cuNavbarBtns,
		cuNavbarMulti,
		cuTitle,
		cuCell,
		cuBadge,
		cuCapsule,
		cuBanner,
		cuSwiper,
		cuCard,
		cuNoSearch,
		cuGrid,
		cuGridMedia,
		cuList,
		cuListCell,
		cuListMedia,
		cuSteps,
		cuTimeline,
		cuInput,
		cuInputNumber,
		cuRadio,
		cuCheckbox,
		cuSwitch,
		cuTextarea
	},
	data() {
		return {
			shareinfo: {
				title: 'ColorUI-Plus',
				desc: '',
				path: 'https://www.homeeyes.cn/app/livedemo/downloadapk.html',
				logo: 'https://www.homeeyes.cn/app/images/icon_logo.png'
			},
			pageGroup: {
				name: '自定义页面',
				auther: '张三',
				create_time: '2021-03-11',
				lists: []
			}
		};
	},
	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		return this.shareinfo;
	},
	onLoad() {
		this.setModule(1);
	},
	onReady() {},
	onHide() {
		this.setModule(0);
	},
	onUnload() {
		this.setModule(0);
	},
	onShow() {
		this.onInitDataPage();
	},
	methods: {
		...mapMutations(['setModule', 'setPageValue', 'addPageElement']),
		onInitDataPage: function() {
			let that = this;
			this.setPageValue(this.pageGroup);
			this.addPageElement({
				controller: 'Header',
				attribute: {
					text: '测试标题',
					bgcolor: 'bg-gradual-blue',
					back: false
				},
				data: []
			});
			this.addPageElement({
				controller: 'Bar',
				attribute: {
					text: '测试标题',
					bgcolor: 'bg-gradual-blue',
					back: false
				},
				data: []
			});
			this.addPageElement({
				controller: 'Bar',
				attribute: {
					text: '测试标题',
					bgcolor: 'bg-gradual-blue',
					back: false
				},
				data: []
			});
			this.addPageElement({
				controller: 'Grid',
				attribute: {},
				data: [
					{
						title: '操作条',
						name: 'bar',
						color: 'cyan',
						cuIcon: 'newsfill'
					},
					{
						title: '卡片',
						name: 'card',
						color: 'blue',
						cuIcon: 'card'
					},
					{
						title: '按钮',
						name: 'button',
						color: 'red',
						cuIcon: 'btn'
					},
					{
						title: '气泡',
						name: 'chat',
						color: 'purple',
						cuIcon: 'font'
					},
					{
						title: '表单 ',
						name: 'from',
						color: 'mauve',
						cuIcon: 'cuIcon'
					}
				]
			});
		},
		onSelectElement: function(e) {
			console.log('测试');
			//console.log(e.currentTarget.dataset.index);
		},
		onCommit: function(e) {
			onHome()
				.then(res => {
					console.log(res);
				})
				.error(err => {
					console.log(err);
				});
		}
	}
};
</script>

<style scoped></style>
